<template>
  <div className="songyuan-map">
    <div id="map" style="height: 600px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      const map = echarts.init(document.getElementById('map'));

      try {
        // 加载并注册松原市的 GeoJSON 数据
        const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/220721.json');

        // 检查响应状态码
        if (!response.ok) {
          throw new Error(`Failed to load GeoJSON data. Status: ${response.status}`);
        }

        // 解析 JSON 数据
        const geoJsonData = await response.json();

        // 注册地图
        echarts.registerMap('songyuan', geoJsonData);

        const option = {
          title: {
            text: '吉林省松原市地图',
            subtext: '',
            left: 'center',
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            min: 0,
            max: 2500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true
          },
          series: [
            {
              name: '访问来源',
              type: 'map',
              map: 'songyuan', // 使用松原市地图
              roam: true,
              zoom: 1, // 设置初始缩放级别
              center: [124.8, 45.1], // 设置地图中心点为松原市地理中心
              itemStyle: {
                normal: {
                  areaColor: '#007bff', // 设置区域颜色为蓝色
                  borderColor: '#fff',
                  label: {show: true}
                },
                emphasis: {
                  areaColor: '#0056b3', // 鼠标悬停时的颜色变化
                  label: {show: true}
                }
              },
              data: [
                {name: '松原市', value: Math.round(Math.random() * 1000)},
                // 更多数据...
              ]
            }
          ]
        };
        map.setOption(option);

      } catch (error) {
        // 处理错误
        console.error('Error initializing map:', error);
        alert('无法加载地图数据，请稍后再试。');
      }
    },
  },
};
</script>

<style scoped>
.songyuan-map #map {
  background-color: #f5f5f5;
}
</style>
